@import '../variables.less';
@import 'mixins.less';

.document-list {
    list-style: none;
    margin: 0;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid @borderLightGrey;
        color: #000;
        display: block;
        font-size: 20px;
        padding: 10px 16px;
        text-decoration: none;
      }
    }
  }

.documents {
  h2 {
    background: @borderLightGrey;
    font-size: 20px;
    margin: 0;
    padding: 10px 16px;
  }

  > header {
    h1 {
      font-weight: bold;
      font-size: 15px;
      line-height: normal;
      margin-top: 5px;
      white-space: normal;
    }
  }

  .filter-bar {
    background: @mobileSubheaderBackground;
    color: #0A84FF;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 10px 16px;
    border-bottom: 1px solid #CFCFD0;

    .return-link {
      color: #0A84FF;
      display: block;
      padding-left: 24px;
      position: relative;

      &:before {
        content: '\f053'; // chevron-left
        font-family: FontAwesome;
        font-size: 16px;
        height: 20px;
        left: 4px;
        position: absolute;
        width: 20px;
      }
    }
  }
}

#products,
#topics {
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    > a,
    > a:visited,
    > a:hover {
      border-bottom: 1px solid @borderLightGrey;
      color: #000;
      display: block;
      padding: 10px 12px 10px 16px;
      text-decoration: none;

      img {
        float: right;
        margin-left: 40px;
        max-width: 60px;
      }

      .title {
        display: block;
        font-size: 18px;
      }
    }
  }
}

#topics {
  font-size: 18px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .documents {
    .filter-bar {
      .return-link {
        &:after {
          .icons-sprite-2x;
        }
      }
    }
  }
}
